import React, { Component } from "react";
import memoryUtils from "../../utils/memory";

import { Redirect, Route, Switch } from "react-router-dom";
import { Layout } from "antd";
import logo from "../../assets/images/logo.png";
import "./index.css";
import LeftMenu from "../../component/left-menu";
import Admin from "../admin/admin";
import Category from "../category/category";
import Product from "../product/product";
import Role from "../role/role";
import User from "../user/user";
import Bar from "../charts/bar";
import Line from "../charts/line";
import Pie from "../charts/pie";
import HeaderCom from "../../component/header/header";

const { Header, Footer, Sider, Content } = Layout;

export default class Home extends Component {
  render() {
    const user = memoryUtils.user;
    if (!user || !user._id) {
      return <Redirect to="/login" />;
    }
    return (
      <div className="home">
        <Layout style={{ height: "100vh" }}>
          <Sider className="left-nav">
            <div className="left-nav-header">
              <img src={logo} alt="logo"></img>
              <p>硅谷后台</p>
            </div>
            <LeftMenu></LeftMenu>
          </Sider>
          <Layout>
            <Header
              style={{ height: "80px", backgroundColor: "white", padding: 0 }}
            >
              <HeaderCom></HeaderCom>
            </Header>
            <Content
              style={{
                backgroundColor: "#eef2f3",
                padding: "20px",
                display: "table",
                height: "83vh",
              }}
            >
              <div className="content-main" style={{ backgroundColor: "#fff" }}>
                <Switch>
                  <Route path="/admin" component={Admin}></Route>
                  <Route path="/category" component={Category}></Route>
                  <Route path="/role" component={Role}></Route>
                  <Route path="/user" component={User}></Route>
                  <Route path="/bar" component={Bar}></Route>
                  <Route path="/line" component={Line}></Route>
                  <Route path="/pie" component={Pie}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Redirect to="/admin"></Redirect>
                </Switch>
              </div>
            </Content>
            <Footer
              style={{
                backgroundColor: "#ccc",
                textAlign: "center",
              }}
            >
              推荐使用谷歌浏览器，可以获得更佳页面操作体验
            </Footer>
          </Layout>
        </Layout>
      </div>
    );
  }
}
